@import "mixin.less";
.comment, .my-comment, .receive-comment {
    background-color: #fff;
}

.comment .comment-content {
    padding-left: 1.226667rem;
}
.my-comment .comment-content {
    padding-left: 0.4rem;
}
.receive-comment .comment-content {
    padding-left: 1.226667rem;
}

.comment-list {
    p {
        .font-dpr(12px);//名字过小问题
    }
    color: @font-sec-color;
    .font-dpr(10px);
    &.top-line:before {
        border-bottom-color: @base-color;
    }
    .comment-style {
        padding-top: 0.24rem;
        padding-bottom: 0.24rem;
    }
    .comment-item {
        padding-top: 0.16rem;
        /*我的评论（发出的评论）和消息详情（收到的回复）*/
        .article-title {
            color: @font-color;
        }
        .comment-head {
            width: 0.746667rem;
            height: 0.746667rem;
            border-radius: 100%;
            background-image: url('/img/@2x/head.png');
            background-position: 50% 50%;
            background-size: contain;
            background-repeat: no-repeat;
        }
        .comment-content {
            i {
                display: inline-block;
                width: 0.48rem;
                height: 0.48rem;
                background-repeat: no-repeat;
            } 
            .time {
                color: @font-sec-color;
                padding-top: 0.16rem;
                padding-bottom: 0.16rem;
            }
            .text {
                padding-top: 0.32rem;
                padding-bottom: 0.293333rem;
                font-size: 26px;
                color: @font-color;
                .font-dpr(13px);
                word-break: break-all;
                text-align: justify;
            }
            .good {
                padding-left: 0.266667rem;
                em {
                    color: @font-sec-color;
                    padding-top: 0.16rem;
                    padding-bottom: 0.133333rem;
                    padding-right: 0.213333rem;
                }   
                &.active em {
                    color: #ff8533;
                }
                i {
                    background-image: url('/img/@2x/good.png');
                    background-position: 0 0;
                    background-size: 1.093333rem 0.48rem;/*图标大小*/
                }
                &.active i {
                    background-position: -0.613333rem 0; 
                }
                &.animate i {
                    animation: heart 0.3s cubic-bezier(0.17, 0.89, 0.32, 1.49);
                }
            }
            .action {
                padding-bottom: 0.32rem;
                .reply {
                    padding-left: 0.266667rem;
                    color: @font-sec-color;
                    i {
                        background-image: url('/img/@3x/reply.png');
                        background-size: 96%;
                    }
                    em {
                        padding-top: 0.106667rem;
                        padding-bottom: 0.133333rem;
                        padding-right: 0.213333rem;
                    }   
                }
                .del {
                    padding-left: 0.266667rem;
                    i {
                        background-image: url('/img/@3x/del.png');
                        background-size: contain;
                    }
                    em {
                        color: @font-sec-color;
                        padding-top: 0.106667rem;
                        padding-bottom: 0.133333rem;
                        padding-right: 0.213333rem;
                    }   
                }
            }
            .post {
                padding-top: 0.186667rem;
                padding-bottom: 0.186667rem;
                padding-left: 0.213333rem;
                padding-right: 0.213333rem;
                margin-bottom: 0.186667rem;
                background-color: #f5f5f5;
                p {
                    color: @font-sec-color;
                }
            }
            .author {
                padding-top: 0.16rem;
                p {
                    color: @font-sec-color;
                }
            }
        }
    }
}

/* 更多评论 */
.comment-more {
    padding-top: 0.48rem;
    padding-bottom: 0.48rem;
    text-align: center;
}

/* 没有评论 */
.no-comment, .article-no-comment {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 90%;
    .container {
        text-align: center;
        color: #c8c9ce;
        padding-top: 0.426667rem;
        padding-bottom: 0.426667rem;
        div {
            display: inline-block;
            .retina-image('no-comment.png');
            background-size: contain;
        }
        p {
            .font-dpr(14px);
        }
    }
}
/* 文章页没有评论 */
.article-no-comment {
    padding-top: 0.266667rem;
    padding-bottom: 0.266667rem;
    &:before {
        border-bottom-color: @base-color;
    }
    .container{
        div {
            width: 1.6rem;
            height: 1.333333rem;
        }
    }   
}
/* 评论列表页没有评论 */
.no-comment {
    position: absolute;
    .container {
        div {
            width: 3.2rem;
            height: 2.266667rem;
        }
        p {
            padding-top: 0.266667rem;
            .font-dpr(18px);
        }
    }
}


/* 消息详情（收到的回复） */
.receive-comment .article-title {
    padding-left: 0.266667rem;
    padding-bottom: 0.186667rem;
    margin-bottom: 0.186667rem;
    color: #707070;
    &.bottom-line:before {
        left: 0.266667rem;
    }
}

@keyframes heart {
  0%{
    transform:rotate(15deg) scale(0.5);
    opacity: 0.5;
  }
  50% {
    transform:rotate(-10deg) scale(1.2);
    opacity: 1;
  }
  100% {
    transform:rotate(0);
    opacity: 1;
  }
}

